<template>
  <el-tabs v-model="activeName" type="border-card" class="crud-tabs__card tab-round">
    <el-tab-pane class="round-tab" v-for="(tab, idx) in tabs" :key="idx" :name="tab.value" :label="tab.label">
      <span slot="label" class="tab-label"
        >{{ tab.label }}
        <b class="kong"
          ><i class="round" v-if="tab.num > 0">{{ tab.num }}</i></b
        >
      </span>
      <component :is="tab.component" v-if="activeName == tab.value" :ref="'c' + idx"></component>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { getPage } from '@/api/warnmessage'
import { mapActions } from 'vuex'

export default {
  name: 'warning_index',
  beforeRouteLeave(to, from, next) {
    console.log('🤡 ~ to:', to)
    // 解决其他页面进入列表有缓存
    if (to.meta.componentName != 'warning/detail') {
      this.clearCache('warning_index')
    }
    next()
  },
  components: {},
  data() {
    return {
      tabs: [
        {
          label: '待处理',
          component: () => import('./tab-view/view0/index.vue'),
          value: '0',
          num: 0
        },
        {
          label: '已处理',
          component: () => import('./tab-view/view1/index.vue'),
          value: '1'
        }
      ],
      activeName: '0'
    }
  },
  computed: {},
  created() {
    let active = this.$route.query.active
    this.activeName = active ?? '0'
  },
  activated() {
    this.getTabRoundNum()
  },
  methods: {
    ...mapActions({
      clearCache: 'tagsView/clearCache'
      // getDict:'dict/getDict'
    }),
    getTabRoundNum() {
      const obj = {
        pageNumber: 1,
        pageSize: 1
      }
      getPage({ ...obj, warningFlag: true }).then((res) => {
        this.tabs[0].num = res.result.total || 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.crud-tabs__card {
  background: #e9eff7 !important;
  ::v-deep > .el-tabs__content {
    height: auto !important;
  }
  .tab-label {
    display: flex;
    .round {
      background: #ff0000;
      height: 20px;
      line-height: 20px;
      border-radius: 10px;
      min-width: 20px;
      text-align: center;
      font-size: 12px;
      color: #fff;
      padding: 0 5px;
      font-style: normal;
      margin: 0 5px;
    }
  }
}
.tab-round {
  ::v-deep .el-tabs__item {
    padding-right: 0 !important;
    .kong {
      min-width: 30px;
      display: inline-block;
      position: relative;
      font-size: 0;
      line-height: 0;
      height: 40px;
      text-align: right;
      .round {
      }
    }
  }
}
</style>
